<script setup lang="ts">
import {ETabPane, ETabs} from "exploria-ui";
import {ref} from "vue";

const activeName = ref<string>('2');
type Placement = InstanceType<typeof ETabs>['placement'];
const placement = ref<Placement>('top-start')
const placementList = [
    'top-start', 'top', 'top-end',
    'bottom-start', 'bottom', 'bottom-end',
    'left-start', 'left', 'left-end',
    'right-start', 'right', 'right-end'
]

</script>

<template>
    <div class="using">
        <select v-model="placement">
            <option :value="placement" v-for="placement of placementList">{{ placement }}</option>
        </select>
        <ETabs v-model="activeName" :placement="placement">
            <ETabPane name="1" label="Card 1">
                我是 Card 1
            </ETabPane>
            <ETabPane name="2" label="Card 222222">
                我是 Card 2
            </ETabPane>
        </ETabs>
    </div>
</template>

<style lang="scss" scoped>
.lx-tabs {
    margin-top: 10px;
    border: solid;
    height: 200px;
}
</style>
